<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=\, initial-scale=1.0" />
    <title>预订单</title>
    <link
      rel="stylesheet"
      href="https://at.alicdn.com/t/c/font_4803307_j0ppeqhqw7.css"
    />
    <link rel="stylesheet" href="../css/public.css" />
    <link rel="stylesheet" href="./preOrder.css" /> 
  </head>
  <body>
    <header style="height: 50px" class="flex jc-sb bg-base aic fff pl-15">
      <a style="width: 80px" href="../bookshelf/list.html">
        <i class="iconfont icon-icon_zuo f24 fff"></i>
      </a>
      <span>会员服务</span>
      <span style="width: 80px"></span>
    </header>
    <div style="height: 52px"></div>

    <main>
      <div class="w100p bg-fff">
        <ul class="flex jc-sb list">
          <li class="flex fdc aic">
            <i class="iconfont icon-huiyuanshoudanmanjian f30"></i>
            <span>单次</span>
            <span>¥9.9</span>
            <span>¥50</span>
            <span>体验价</span>
          </li>
          <li class="flex fdc aic">
            <i class="iconfont icon-huiyuanshoudanmanjian f30"></i>
            <span>6次卡</span>
            <span>¥240</span>
            <span>¥300</span>
            <span>往返包邮</span>
          </li>
          <li class="flex fdc aic">
            <i class="iconfont icon-huiyuanshoudanmanjian f30"></i>
            <span>12次卡</span>
            <span>¥420</span>
            <span>¥600</span>
            <span>往返包邮</span>
          </li>
          <li class="flex fdc aic">
            <i class="iconfont icon-huiyuanshoudanmanjian f30"></i>
            <span>年卡</span>
            <span>¥799</span>
            <span>¥1200</span>
            <span>不限次数</span>
          </li>
        </ul>
      </div>

      <section class="member-benefits w100p bg-fff">
        <h2>会员权益</h2>
        <ol>
          <li>1.可借1个书袋，共10本</li>
          <li>2.每个书袋归还期限最长1个月</li>
          <li>3.同时能借一个书袋，归还后借另一个</li>
          <li>4.购买后效期1个月，超过有效期将无法使用</li>
          <li>5.借还双向包邮，免配送费</li>
          <li>
            6.购买后将获得支付金额相同麦粒积分，可在平台内抵扣现金或商城兑换礼品
          </li>
        </ol>
      </section>

      <div class="coupon flex jc-sb aic w100p bg-fff mt-10">
        <p>优惠券</p>
        <span>无可用</span>
      </div>

      <div class="points flex jc-sb aic w100p bg-fff mt-10">
        <p>麦粒(共0个)</p>
        <span>不可抵扣</span>
      </div>

      <div class="validity flex jc-sb aic w100p bg-fff mt-10">
        <p>会员有效期</p>
        <span>3个月</span>
      </div>

      <div class="tips flex jc-sb aic w100p mt-10">
        <p>
          暂不支持
          新疆、内蒙古、西藏、海南、甘肃、宁夏、青海、港澳台地区及境外的配送包邮服务
        </p>
      </div>
    </main>

    <div style="height: 50px"></div>

    <div class="amount flex w100p aic jc-sb bg-fff">
      <p class="base fw-b">金额：<span id="totalAmount">0.0</span>元</p>
      <button class="next-step fff">下一步</button>
    </div>
  </body>
</html>
